*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}

#div1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    /* absolute相当于浮动定位，与静态定位static不在同一平面内 */
    position: absolute;
    right: 0;
    bottom: 0;
}

#div2{
    width: 300px;
    height: 300px;
    background-color: brown;
    position: static;
    /* 静态定位跟随文档流，上下左右均无效 */
    margin-left: 50px;
    margin-top: 50px;
}

#div3{
    width: 400px;
    height: 400px;
    background-color: green;
    /* 相对定位，相对于文档流原本的位置 */
    position: relative;
}

#div4{
    width: 500px;
    height: 500px;
    background-color: blueviolet;
    position: fixed;
    bottom: 0;
    right: 0;
}



#div5{
    width: 300px;
    height: 300px;
    background-color: brown;
    margin-right: 50px;
    margin-top: 50px;
    /* 父类含有absolute，那么其子类absolut的定位是相对于父类的位置 */
    position: absolute;
    right: 0;
    top: 0;
}

#div6{
    width: 200px;
    height: 200px;
    background-color: rgb(129, 252, 195);
    /* div5父类包含absolu，因此div6的absolute定位相对于div5 */
    position: absolute;
    right: 0;
    top: 0;
}


/* fixed定位是针对于浏览器窗口原点进行定位 */
#div7{
    width: 100%;
    height: 50px;
    background-color: aqua;
    margin: 0 auto;
    position: fixed;
    top: 20px;
}

.button_menu{
    height: 50px;
}

button_menu span{
    height: 50px;
}